/*
 * @Author: xinyang3
 * @Date: 2021-07-19 18:21
 * @Descripttion: 自定义事件
 * @LastEditors: xinyang3
 * @LastEditTime: 2021-07-19 18:39
 */

const Container = {
  name: 'container',
  methods: {
    click(e) {
      console.log(e);
    },
    submit({
      email,
      pass
    }) {
      console.log(email, pass);
    }
  },
  template: `
    <custom-form @click="click" @submit="submit"></custom-form>
  `
};

const app = Vue.createApp(Container);

// 验证抛出的事件
app.component('custom-form', {
  emits: {
    click: null,
    submit: ({
      email,
      pass
    }) => {
      if (email && pass) {
        return true;
      } else {
        console.warn('invalid submit event payload.');
      }
    }
  },
  methods: {
    submitForm() {
      this.$emit('submit', {
        email: 'a@123.com',
        pass: 123456
      });
    }
  },
  template: `
  <button class="btn one" @click="$emit('click', $event)">one</button>
  <button class="btn two" @click="submitForm">submit</button>
  `
})

app.mount('#app');